<template>
    <div class="login">
        <div class="login_head">
            <div class="lh_div">
                <span>AI爱招聘</span>
            </div>
            <div class="lh_div">
                <span>不仅仅是招聘</span>
            </div>
        </div>
        <div class="main_index">
            <div class="login_title">
                <span>{{title}}</span>
            </div>
            <div class="login_desc">
                <span>首次验证通过即注册账号</span>
            </div>
            <div class="login_input">
                <input placeholder="请输入手机号" v-model="phone"/>
            </div>
            <div class="login_input" style="background: #fff;">
                <input placeholder="请输入验证码" v-model="code"/>
                <div class="send_btn" @click="sendCode">
                    <span>发送验证码</span>
                </div>
            </div>
            <div class="loginbottom" >
                <div class="lb_left" @click="setCheck">
                    <i class="iconfont icon-danxuanweixuanzhong" v-if="!haveCheck"></i>
                    <i class="iconfont icon-xuanzhong" style="color: #F5792A;" v-else></i>
                </div>
                <div class="lb_right">
                    <span>已阅读并同意<span class="lbr_color">《AI爱招聘用户协议》</span>和<span class="lbr_color">《隐私协议》</span>，允许奋斗者统一管理账号信息</span>
                </div>
            </div>

            <div class="login_btn_list">
                <div class="lbl_div" v-if="phone.length!=11 || !haveCheck || !code">
                    <span>下一步</span>
                </div>
                <div class="lbl_div lbl_color_div" v-if="phone.length==11 && haveCheck && code" @click="toRegister">
                    <span>下一步</span>
                </div>
            </div>

            <div class="login_next">
                <!-- <div class="ln_name">
                    <span>其他方式登录>></span>
                </div>
                -->
            </div>
        </div>
        

       
    </div>
</template>
  
<script>
    
    import homeapi from '@/api/api.js'
import until from '@/api/until'
    export default {
        name: 'login',
        data(){
            return{
                phone:"",
                haveCheck:false,
                code:"",
                title:"",
                type:1,
            }
        },
        components: {
            
        },
        mounted(){
            let title=this.$route.query.title
            let type=this.$router.type
            this.type=type;
            if(title){
                this.title=title
            }
            else{
                this.title="手机号注册"
            }
        },
        methods:{
            async sendCode(){
                let phone=this.phone
                if(phone.length!=11){
                    this.$message.error("请传入正确的手机号")
                    return false;
                }
                this.$toast.loading({
                    title:"加载中...",
                    
                })
                let data=await homeapi.sendCode({phone});
                console.log(data)
                if(data.code==200){
                    this.$toast.clear();
                    // this.$router.push("/code?phone="+phone)
                }
                else if(data.code==500){
                    this.$toast.clear();
                    // this.$router.push("/code?phone="+phone)
                }
            },
            setCheck(){
                this.haveCheck=true;
            },
            async toRegister(){
                let code=this.code
                let phone=this.phone
                let inviteCode=""
                let type=1
                this.$toast.loading({
                    title:"加载中..."
                })
                let data=await homeapi.checkCode({code,phone,inviteCode,type});
                if(data.code==200){
                    this.$toast.clear();
                    if(data.result!='绑定成功'){
                        until.setCookie("token",data.result)
                    }
                  
                    this.getUserInfo();
                    // this.$router.push("/company")
                }
            },
            async getUserInfo(){
				let data=await homeapi.getUserinfo();
				if(data.code==402){
					// window.location.href=`https://${window.location.hostname}/mobile/#/login`
				}
				if(data.code==403){
                    if(this.type==1){
                        this.$router.push("/company")
                    }
                    else{
                        this.$router.push("/user")
                    }
                    
					// window.location.href=`https://${window.location.hostname}/mobile/#/company`
				}
				if(data.code==200){

				}
				
			}

        }
    }
</script>
<style scoped lang="less">
    .login{
        width: 100%;
        display: inline-block;
    }
    .login_head{
        width: 100%;
       
        margin-top: 1.6rem;
        padding-left: 2.44rem;
        font-size: .8533rem;
        color: #F5792A;
        box-sizing: border-box;
    }
    .lh_div:last-child{
        margin-top: .5733rem;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    .login_title{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .64rem;
        color: #333333;
        line-height: .64rem;
        margin-top: 1.6667rem;
    }
    .login_desc{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: .32rem;
        font-size: .32rem;
        color: #666666;
    }
    .login_input{
        width: calc(100% - 1.28rem);
        margin-left: .64rem;
        height: 1.1733rem;
        background: #F5F5F5;
        border-radius: 8px;
        overflow: hidden;
        margin-top: 1.0667rem;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    .login_input input{
        width: 100%;
        border-radius: 8px;
        height: 100%;
        background: #F5F5F5;
        padding-left: .32rem;
        font-size: .3733rem;
        border: 0px;
        outline: none;
    }
    .send_btn{
        width: 200px;
        height: 100%;
        border-radius: 8px;
        background: #F5792A;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        color: #ffffff;
        margin-left: 20px;
    }
    .loginbottom{
        width: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 0 .64rem;
        box-sizing: border-box;
        margin-top: .8rem;
    }
    .lb_left{
        margin-top: .2rem;
    }
    .lb_left .iconfont{
        font-size: .32rem;
        color: #999999;
        
    }
    .lb_right{
        flex: 1;
        font-size: .32rem;
        color: #333333;
        line-height: .64rem;
        margin-left: .32rem;
    }
    .lbr_color{
        color: #F5792A;
    }
    .login_btn_list{
        width: 100%;
        padding: 0 .64rem;
        box-sizing: border-box;
        margin-top: 1.0667rem;
    }
    .lbl_div{
        width: 100%;
        height: 1.1733rem;
        background: #F5F5F5;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .3733rem;
        color: #999999;
        margin-top: 1.0667rem;
    }
    .login_next{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .32rem;
        color: #999999;
        margin-top: 2.1333rem;
    }
    .lbl_color_div{
        background:#F5792A;
        color: #ffffff;
    }
    .main_index{
        max-width: 600px;
        margin: 0 auto;
    }
</style>

  